<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";
import { getArticleList, getPic } from "@/api/article.js";

const props = defineProps({
	params: {
		type: Object,
	},
	height: {
		type: String,
	},
	limit: {
		type: Number,
		default: 5,
	},
	type: {
		type: Number,
	},
});

const carouselList = ref([]);

const getCarouselList = async () => {
	const paramsData = {
		type: props.type,
		isView: 1,
	};
	const res = await getPic(paramsData);
	if (res.data.code == 200) {
		carouselList.value = res.data.data?.records;
	}
};

const clickItem = (item) => {
	window.open(item.url, "_blank");
};

onMounted(() => {
	getCarouselList();
});
</script>

<template>
	<n-carousel
		:dot-placement="'bottom'"
		:slides-per-view="5"
		draggable
		show-arrow
		:loop="false"
		:space-between="10"
		:style="{
			height: props.height,
			backgroundColor: 'rgb(221, 221, 221)',
			width: props.width,
			cursor: 'pointer',
		}">
		<div v-for="(item, index) in carouselList" :key="index" class="flex flex_column" style="height: 100%" @click="clickItem(item)">
			<div class="carouselImg" :style="{ 'background-image': 'url(' + item.picFiles[0].accessUrl + ')' }"></div>
		</div>
	</n-carousel>
</template>

<style scoped>
.carouselText {
	position: fixed;
	bottom: 0;
	flex-grow: 1;
	color: white;
	background: rgba(0, 0, 0, 0.6);
	line-height: 36px;
	font-size: 18px;
	padding: 0 20px;
}
.carouselImg {
	width: 100%;
	height: 100%;
	cursor: pointer;
	object-fit: cover;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>
